<template>
    <div>
      <h1>22222</h1>
      <h2>
      	<span>{{ $store.state.myname }}</span>
      	<span>{{ $store.state.count }}</span>
      	<span>{{ count }}</span>
      	<span>{{ mapCount }}</span>
      	<span>{{ mapCountArr }}</span>
      </h2>
      <div>
      	<button @click="$store.commit('add',10)">加</button>
      	<button @click="reduce">减</button>
      </div>
    </div>
</template>

<script>
// import store from '../../vuex/store'
import {mapState, mapMutations} from 'vuex'

export default {
	computed: {    // 计算属性
		count() {  // store状态值付给模板第一种方法 通过computed的计算属性直接赋值     
			return this.$store.state.count
		},
		...mapState({  // store状态值付给模板第二种方法 通过mapState的对象来赋值
			mapCount: state => state.mapCount  // 理解为传入state对象，修改state.count属性
		}),
		...mapState(['mapCountArr'])  // store状态值付给模板第三种方法 通过mapState的数组来赋值
	},
	methods: {
		...mapMutations([   // 不使用$store.commit直接调用store.js 中的方法
			'reduce'
		])
	}
}
</script>

<style scoped>
h2{
	text-align: center;
}
button{
	padding: 2px 16px;
}
</style>
